<template>
  <view class="containner">
    <u-navbar
      height="50"
      title="银行卡"
      title-size="36"
      back-icon-color="#333"
      title-color="#333"
    ></u-navbar>
    <view class="from">
      <view class="warning">
        注：为了您的账户收益权益，请确保填写的银行卡信息真实有效，一经提交不能修改！
      </view>
      <u-cell-group>
        <u-cell-item title="卡号" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 75%" class="text_right">
              <input
                v-model="form.cardNo"
                placeholder="请输入银行卡号"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>
        <u-cell-item title="银行名称" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 75%" class="text_right">
              <input
                v-model="form.cardAddress"
                placeholder="请输入您开户银行全称"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>
        <u-cell-item title="持有人" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <input
                v-model="form.realName"
                placeholder="请输入持有人姓名"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>
        <u-cell-item title="默认" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <u-switch v-model="form.isDefault" active-color="#10A28F"></u-switch>
            </view>
          </view>
        </u-cell-item>
      </u-cell-group>
    </view>

    <view class="submit_the_module">
      <view @click="submit">确认提交</view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
const apiPath = {}

export default {
  data() {
    return {
      list: [
        {
          name: '1',
          disabled: 1
        },
        {
          name: '0',
          disabled: 0
        }
      ],
      form: {
        realName: '',
        cardNo: '',
        cardAddress: '',
        isDefault: false
      }
    }
  },
  onLoad(e) {
    if (e.cardInfo) {
      this.form = JSON.parse(e.cardInfo)
    }
  },
  onShow() {},
  onReady() {},
  methods: {
    confirm(row) {
      this.typeEleven = this.Ranges[row]
      this.form.refund_type_id = this.Ranges[row].id
    },
    radioChange(e) {
      console.log(e)
    },
    selectAFunction(value) {
      this.show = true
    },
    submit() {
      if (!this.form.cardAddress) {
        this.$refs.uToast.show({
          title: '银行名称不能为空'
        })
        return
      }
      if (!this.form.cardNo) {
        this.$refs.uToast.show({
          title: '银行卡号不能为空'
        })
        return
      }

      if (!this.form.realName) {
        this.$refs.uToast.show({
          title: '持有人不能为空'
        })
        return
      }

      this.$u.post('/app-api/pay/bank/create', this.form).then((res) => {
        if (res.code === 0) {
          this.$u.toast('成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        } else {
          this.$u.toast(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.submit_the_module {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;

  view {
    width: 710rpx;
    border-radius: 40rpx;
    padding: 20rpx 0rpx;
    background-color: #10a28f;
    color: #f1f1f1;
    font-size: 30rpx;
    text-align: center;
  }
}

.from {
  padding: 20rpx;
}

.info-view {
  background-color: #fff;
  font-size: 28rpx;
  color: #606266;
  padding: 28rpx;
}

.containner {
  background-color: #f6f8f9;
  min-height: 100vh;
}

.tips {
  background-color: #f1f6ff;
  padding: 10upx 20upx;
  font-size: 22upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #4286f4;
  line-height: 32upx;
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;

  .agreement-text {
    display: flex;
    padding-left: 8rpx;
    color: $u-tips-color;

    text {
      color: #2d93fd;
    }
  }
}

.warning {
  padding: 20rpx;
  background-color: #f5e8e6;
  color: #f54831;
  font-size: 26rpx;
}
</style>
